<template>

  <div>
    <video id="myvideo" :src="videoSrc" :poster="videoImg" :muted="muteStatus" :autoplay="playStatus"
           width="100%" webkit-playsinline="true">
      your browser does not support the video tag
    </video>
    <span class="ico ico-sound" :class="{ active: isMute }" v-on:click="closeSoundClick()"></span>
    <span class="ico ico-skip"></span>
    <span class="ico ico-video" :class="{ hide: isPlay }" v-on:click="playClick()"></span>
  </div>

</template>

<script>
export default {
  name: 'vide222o',
  data () {
    return {
      deviceid: 123,
      vid: '',
      // _dom: '',
      videoSrc: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
      videoImg: 'http://static.fdc.com.cn/avatar/usercenter/5996999fa093c04d4b4dbaf1_162.jpg',
      playStatus: '',
      muteStatus: '',
      isMute: true,
      isPlay: false
    }
  },
  ready: function () {
  },
  mounted () {
    this.videoSrc = this.$route.params.vid
  },
  methods: {
    playClick () {
      this.isPlay = !this.isPlay
      this.playStatus = 'autoplay'
    },
    closeSoundClick () {
      this.isMute = !this.isMute
      if (this.isMute) {
        this.muteStatus = ''
      } else {
        this.muteStatus = 'muted'
      }
    }
  }
}
</script>

<style scoped>
  a{
    margin: 0 auto;
  }
  .bad-video {
    position: relative;
    overflow: hidden;
    background-color: #CCCCCC;
  }

  .bad-video .vplay {
    position: absolute;
    width: 15%;
    z-index: 99;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
</style>
